<template>
  <div class="firePower">
    <div id="firePowerMap"></div>
    <div id="button">
      <button @click="insertShroud">添加</button>
      <button @click="deleteAll">删除全部</button>
      <button @click="deletePolyline">删除折线</button>
      <button @click="deleteCircle">删除圆</button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    _getMapData () {
      // 百度地图API功能
      var map = new BMap.Map('firePowerMap')
      map.centerAndZoom(new BMap.Point(116.399, 39.910), 19)
      map.enableScrollWheelZoom(true)
      window.map = map
    },
    insertShroud () {
      var polyline = new BMap.Polyline([
        new BMap.Point(116.399, 39.910), // 定义折线第一个点
        new BMap.Point(116.405, 39.920), // 定义折线第二个点
        new BMap.Point(116.425, 39.900), // 定义折线第三个点
        new BMap.Point(116.430, 39.918) // 定义折线第四个点
      ], {
        strokeColor: 'red',
        strokeWeight: 1,
        strokeOpacity: 1
      }) // 创建折线
      // 参数：颜色，线的宽度，线的透明度
      map.addOverlay(polyline)
      window.polyline = polyline // 将折线储存在全局
      var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)) // 创建点
      map.addOverlay(marker)

      var point = new BMap.Point(116.404, 39.915)
      var circle = new BMap.Circle(point, 100, {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5
      }) // 创建圆
      map.addOverlay(circle)
      window.circle = circle // 将圆储存在全局
      var polygon = new BMap.Polygon([
        new BMap.Point(116.387112, 39.920977), // 定义多边形第一个点
        new BMap.Point(116.385243, 39.913063), // 定义多边形第二个点
        new BMap.Point(116.394226, 39.917988), // 定义多边形第三个点
        new BMap.Point(116.401772, 39.921364), // 定义多边形第四个点
        new BMap.Point(116.412482, 39.927893) // 定义多边形第五个点
      ], {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5
      }) // 创建多边形
      map.addOverlay(polygon)
    },
    deleteAll () {
      map.clearOverlays() // 删除全部
    },
    deletePolyline () {
      polyline.clearOverlays() // 删除折线
    },
    deleteCircle () {
      circle.clearOverlays() // 删除圆
    }
  },
  mounted () {
    this._getMapData()
  }
}
</script>

<style scoped>
#firePowerMap {
  width: 100%;
  min-height: 95%;
  overflow: hidden;
  margin: 0;
  position: absolute;
  font-family: "微软雅黑";
  bottom: 0;
}
</style>
